<template>
	<view class="pageBox">
		<Header :title="'蜂言蜂语'"></Header>
			<u-tabs class="tabs" lineHeight="6rpx" :list="tabList" @change="changeTabs" :scrollable="false"
			lineColor="#00A0E9" itemStyle="height:89rpx;border-top:1rpx solid #F7F9FB;background:#fff"
			:current="current" :activeStyle="{
		    color: '#019FE8'}" :inactiveStyle="{
		    color: '#000000'}"></u-tabs>
		<view class="content">
		<swiper :style="{height : `calc(100vh - ${navBarHeight})`}" class="swiper" :current="current"
			@change="currentChange" :circular="false" :duration="300">
			<!-- 公告 -->
			<swiper-item class="swiperItem">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom">
					<view class="cardList">
						<view class="cardItem" v-for="item in newsList" :key="item.id" @click="goDetails(item)">
							<view class="ItemLeft">
								<view class="title">
									{{item.headline}}
								</view>
								<view class="detailsText">
									{{item.DeatilsText}}
								</view>
							</view>
							<view class="picBox">
								<image class="pic" :src="item.coverId" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="emptyBox" v-if="newsList.length==0 && isMouted">
							<image class="emptyIcon" src="../../../static/empty.png" mode="widthFix"></image>
							<view class="emptyText">
								暂无相关百科！
							</view>
						</view>
						<view class="loadmoreBox" v-if="newsList.length!=0">
							<u-loadmore :status="status" :icon-type="iconType" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 咨询 -->
			<swiper-item class="swiperItem">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom">
					<view class="cardList">
						<view class="cardItem" v-for="item in newsList" :key="item.id" @click="goDetails(item)">
							<view class="ItemLeft">
								<view class="title">
									{{item.headline}}
								</view>
								<view class="detailsText">
									{{item.DeatilsText}}
								</view>
							</view>
							<view class="picBox">
								<image class="pic" :src="item.coverId" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="emptyBox" v-if="newsList.length==0 && isMouted">
							<image class="emptyIcon" src="../../../static/empty.png" mode="widthFix"></image>
							<view class="emptyText">
								暂无相关蜂养生！
							</view>
						</view>
						<view class="loadmoreBox" v-if="newsList.length!=0">
							<u-loadmore :status="status" :icon-type="iconType" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiperItem">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="ReachBottom">
					<view class="cardList">
						<view class="cardItem" v-for="item in newsList" :key="item.id" @click="goDetails(item)">
							<view class="ItemLeft">
								<view class="title">
									{{item.headline}}
								</view>
								<view class="detailsText">
									{{item.DeatilsText}}
								</view>
							</view>
							<view class="picBox">
								<image class="pic" :src="item.coverId" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="emptyBox" v-if="newsList.length==0 && isMouted">
							<image class="emptyIcon" src="../../../static/empty.png" mode="widthFix"></image>
							<view class="emptyText">
								暂无相关蜂咨讯！
							</view>
						</view>
						<view class="loadmoreBox" v-if="newsList.length!=0">
							<u-loadmore :status="status" :icon-type="iconType" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>




		</swiper>
	</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				current: 0,
				type:0,
				tabList: [{
						name: '蜂百科',
						id: 0
					},
					{
						name: '蜂养生',
						id: 4
					},
					{
						name: '蜂咨讯',
						id: 5
					},
					
				],
				newsList: [],
				isMouted: false,
				status: 'loadmore',
				iconType: 'flower',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				navBarHeight: 0,
			}
		},
		onLoad(e) {
			if (e.type != undefined) {
				this.current = e.type
			}
			this.getNewsList()
		},
		created() {
			this.setNavBarHeight()
		},
		components: {
			Header
		},
		methods: {
			async setNavBarHeight() {
				let that = this
				console.log(1)
				wx.getStorage({
					key: 'navBarHeight',

					success(res) {
						// 换算为rpx单位 
						that.navBarHeight = res.data * 2 + 100 +'rpx'
					}
				})

			},
			changeTabs(item) {
				this.current = item.index
				this.type=item.id
				this.getNewsList()
			},
			goDetails(res) {
				uni.navigateTo({
					url: '/pages/index/richText/richText?id=' + res.id + '&title=' + '蜂言蜂语'
				})
			},
			async currentChange(e) {
				// 用户触摸滑动切换时,更新data中的current
				this.current = e.detail.current
				if(this.current==0){
					this.type=this.tabList[0].id
				}else if(this.current==1){
					this.type=this.tabList[1].id
				}else if(this.current==2){
					this.type=this.tabList[2].id
				}		
				this.newsList = []
				this.pageNum = 1
				this.getNewsList()
				
			},
		
			
			filtration(richText){
				//首先去除标题标签  去除标签
			
			   return richText.replace(/<h\d>(.*?)<\/h\d>/g, '').replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
			},
			async getNewsList() {
				let params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					type: this.type,
				}
				
				//蜂言蜂语列表
				let res = await this.$api.request('manage/information/client/list', 'get', params)
				res.data.list.forEach((item)=>{
					item.DeatilsText=this.filtration(item.content)
					
				})
				console.log(res.data.list)
				this.total = res.total
				if (this.pageNum == 1) {
					this.newsList = res.data.list
				} else {
					this.newsList.push(...res.data.list)
				}
				this.isMouted = true
				if (this.newsList.length == this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loading'
				};

			},
			ReachBottom() {
				let that = this;
				if (this.newsList.length == this.total || this.newsList.length > this.total) {
					this.status = 'nomore'
					return; //没有更多数据时  中止执行后续代码
				}
				console.log('触发了')

				this.status = 'loading'; //设置触底加载组件状态 为正在加载
				this.pageNum = ++this.pageNum; //请求下一页

				that.getNewsList(); //请求的接口数据
				if (this.newsList.length == this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loading'
				};

			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		height: 100vh;
		width: 100vw;
	}

	.swiper {
		width: 100%;
		flex: 1;
		box-sizing: border-box;
		// height: calc(100vh - 224rpx);
	
		
		.swiperItem {
			width: 100%;
			background-color: #f5f5f5;
		}

	}

	.cardList {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		.cardItem {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 4rpx solid #eee;
			background-color: #fff;

			.ItemLeft {
				width: 60%;
				display: flex;
				flex-direction: column;
				padding: 0 20rpx;

				.title {
					color: #333;
					font-size: 28rpx;
				}

				.detailsText {
					margin-top: 25rpx;
					color: #999;
					font-size: 24rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.picBox {

				flex: 1;
				border-radius: 8rpx;
				overflow: hidden;

				.pic {
					width: 100%;
					height: 100%;

				}
			}

		}
	}

	.emptyBox {
		width: 100%;
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.emptyText {
			font-size: 32rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.emptyIcon {
			width: 20%;

		}
	}
</style>